In this chapter you'll learn how to  align text and images. (You don't know how to add images in yet. Images are coming up in a later lesson)

The divider examples don't use an ending to close a command because they are used once, not in a continuation. The <dd> allows you to indent a paragraph, making the text look like the indentation of this paragraph you're now reading. The <p> you should already know. It gives you a new paragraph, and writes whatever else below the last paragraph. Can be used it stacking images and text. The <hr> is a very common one. You probably have wondered how they make a horizontal line going accross a page. (Like the colored one above. But this one is just grey. You must have seen them while searching the web)
The <br> is similar to the <p> (new paragraph) but it doesn't move the next paragraph down as far.
<dd> indent paragraph
<P> new paragraph
<HR> add horizontal line
<BR> Line Break
Below you can see the <dd> indentation, the difference between the <br> (top one) and <p> (bottom one) both after the comma. And the <hr> is at work as well, adding those grey separator lines.

You should be able to figure out the code for the image above. If not here it is:
<hr>
<dd>Welcome to Extreme Mac! I hope your learning your, <br> html the easy way!
<hr>
<dd>Welcome to Extreme Mac! I hope your learning your, <p> html the easy way!
<hr>

I think you're ready for a some more complicated html. Below, I'll show you how to make your <hr> (divider line) specified sizes. It's easy once you get the hang of it.

1) To make a divider line thicker use this:
<HR SIZE=pixel size>
2) To make a divider line have more width across screen use this:
<HR WIDTH=pixel size>
3) To make a divider line a certain percentage of the width accross screen use this:
<HR WIDTH=screen%>
4) To make your divider a solid line, use this:
<HR NOSHADE>

•Using the example 3 is nice because everybody has a different size monitor, so your divider will always look good on a 17 inch vs. a 12 inch.

•Below are some examples of those dividers in use.

•Below is the code I used to make the image above:
<HR SIZE=10>
<HR WIDTH=200>
<HR WIDTH=30%>
<HR NOSHADE>

•For your web page, lets add in  2 horizontal line confugurations in 1. Make it 30% (Example 3) and a thickness of 10 pixels. You will be replacing the <p> because the divider lines already configure it in with it.
Below is the code:
<hr width=30% size=10>

•Put it under your heading. Your page should now look like this:

     
Extreme Mac
  //   //   //////
 /////        //
// //    //////

 •You page's code should now look similar to this:

<html>
<HEAD>
<TITLE>Put the Title Here</TITLE>
</HEAD>
<body bgcolor="#ffffff" background="imagelocation.gif" text="#000000" link="#0000ff" vlink="#00005a">
<FONT COLOR="DD0000"> <center><h1><b>Extreme Mac</b></h1></center></FONT> 
<hr width=30% size=10>
<pre>
  //   //   //////
 /////        //
// //    //////
</pre>
<p>
</body>
</html>